<div id="connect-add" class="clearfix" ng-controller="addConnectionCtrl">
  <div class="connect-add-menu">
    <ul class="nav nav-tabs">
      <li ng-class="{ 'active' : currentSubPage === 'server' }">
        <a ng-click="currentSubPage = 'server'">Server</a>
      </li>
      <li ng-class="{ 'active' : currentSubPage === 'auth' }">
        <a ng-click="currentSubPage = 'auth'">Authentication</a>
      </li>
    </ul>
  </div>
  <form class="form-horizontal" name="addForm" novalidate>
    <div class="sub-page" ng-show="currentSubPage === 'server'">
      <div class="form-group" ng-class="{ 'has-error' : !addForm.name.$valid && addConnectionFormSubmitted }">
        <label class="col-sm-4 control-label">Connection Name</label>
        <div class="col-sm-8">
          <input class="form-control" ng-model="addConnectionForm.name" name="name" type="text" required>
        </div>
      </div>
      <hr>
      <div class="form-group">
        <label class="col-sm-4 control-label">Is this a Replica Set?</label>
        <div class="col-sm-8">
          <btn-boolean ng-model="addConnectionForm.enableReplicaSet" true-value="'Yes'" false-value="'No'"></btn-boolean>
        </div>
      </div>
      <div ng-hide="addConnectionForm.enableReplicaSet">
        <div class="form-group" ng-class="{ 'has-error' : !addForm.host.$valid && addConnectionFormSubmitted }">
          <label class="col-sm-4 control-label">Server Host</label>
          <div class="col-sm-8">
            <input class="form-control" ng-model="addConnectionForm.host" name="host" type="text" ng-required="!addConnectionForm.enableReplicaSet" placeholder="localhost">
          </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : !addForm.port.$valid && addConnectionFormSubmitted }">
          <label class="col-sm-4 control-label">Server Port</label>
          <div class="col-sm-8">
            <input class="form-control" ng-model="addConnectionForm.port" name="port" type="text" ng-required="!addConnectionForm.enableReplicaSet" placeholder="27017">
          </div>
        </div>
      </div>
      <div class="clearfix">
        <replica-set ng-model="addConnectionForm.replicaSet" ng-if="addConnectionForm.enableReplicaSet" form="addForm" form-submitted="addConnectionFormSubmitted"></replica-set>
      </div>
      <hr>
      <div class="form-group" ng-class="{ 'has-error' : !addForm.databaseName.$valid && addConnectionFormSubmitted }">
        <label class="col-sm-4 control-label">Database Name</label>
        <div class="col-sm-8">
          <input class="form-control" ng-model="addConnectionForm.databaseName" name="databaseName" type="text" ng-disabled="isLocalHost(addConnectionForm.host)" ng-required="!isLocalHost(addConnectionForm.host)" placeholder="optional">
        </div>
      </div>
    </div>
    <div class="sub-page" ng-show="currentSubPage === 'auth'">
      <div class="form-group" ng-class="{ 'has-error' : !addForm.username.$valid && addConnectionFormSubmitted }">
        <label class="col-sm-4 control-label">Username</label>
        <div class="col-sm-8">
          <input class="form-control" ng-model="addConnectionForm.auth.username" name="username" type="text">
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : !addForm.password.$valid && addConnectionFormSubmitted }">
        <label class="col-sm-4 control-label">Password</label>
        <div class="col-sm-8">
          <input class="form-control" ng-model="addConnectionForm.auth.password" name="password" type="text">
        </div>
      </div>
    </div>
  </form>
  <div class="clearfix">
    <div class="pull-left">
      <button class="btn btn-default btn-icon-left" type="button" ng-click="testConnection($event)" ng-bs-animated-button="" is-submitting="isTestingConnection" result="testConnectionResult" options="testConnectionBtnOptions">
      </button>
    </div>
    <div class="add-buttons pull-right">
      <button class="btn btn-default" type="button" ng-click="changePage('list', null, $event)">
        Back
      </button>
      <button class="btn btn-primary" type="button" ng-click="addOrUpdateConnection(addForm, $event)">
        {{ selectedConnection ? 'Save' : 'Create' }}
      </button>
    </div>
  </div>
</div>
